import React, { useState } from "react";
import { Table, Button, Space, Input } from "antd";
import type { ColumnsType } from "antd/es/table";
import "./DatabaseTable.css";

interface DataType {
  key: string;
  columnName: string;
  dataType: string;
  nullable: string;
  defaultValue: string;
  primaryKey: string;
  comment: string;
}

const DatabaseTable: React.FC = () => {
  const [searchText, setSearchText] = useState("");

  const columns: ColumnsType<DataType> = [
    {
      title: "列名",
      dataIndex: "columnName",
      key: "columnName",
      width: 200,
    },
    {
      title: "数据类型",
      dataIndex: "dataType",
      key: "dataType",
      width: 150,
    },
    {
      title: "可为空",
      dataIndex: "nullable",
      key: "nullable",
      width: 100,
    },
    {
      title: "默认值",
      dataIndex: "defaultValue",
      key: "defaultValue",
      width: 100,
    },
    {
      title: "约束",
      dataIndex: "primaryKey",
      key: "primaryKey",
      width: 100,
    },
    {
      title: "注释",
      dataIndex: "comment",
      key: "comment",
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      columnName: "ID",
      dataType: "NUMBER",
      nullable: "否",
      defaultValue: "--",
      primaryKey: "主键",
      comment: "--",
    },
    {
      key: "2",
      columnName: "NAME",
      dataType: "VARCHAR(100)",
      nullable: "是",
      defaultValue: "--",
      primaryKey: "--",
      comment: "姓名",
    },
    {
      key: "3",
      columnName: "AGE",
      dataType: "INT",
      nullable: "是",
      defaultValue: "18",
      primaryKey: "--",
      comment: "年龄",
    },
  ];

  const handleSearch = (value: string) => {
    setSearchText(value);
  };

  const toolbarButtons = (
    <Space className="toolbar">
      <Button type="primary">添加列</Button>
      <Button>修改列</Button>
      <Button>重命名列</Button>
      <Button>删除列</Button>
      <Button>截断</Button>
      <Button>删除</Button>
      <Button>创建页面</Button>
      <Input.Search
        placeholder="搜索"
        onSearch={handleSearch}
        style={{ width: 200 }}
      />
    </Space>
  );

  return (
    <div className="database-table">
      {toolbarButtons}
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        bordered
        size="middle"
      />
    </div>
  );
};

export default DatabaseTable;
